@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

.user-center {
	background: $bg-page;
	min-height: 100vh;

	// 用户信息区域
	.user-info-section {
		display: flex;
		align-items: center;
		padding: $spacing-xl;
		background: $bg-card;
		border-radius: 0 0 $radius-md $radius-md;
		box-shadow: $shadow-sm;

		.user-avatar {
			margin-right: $spacing-lg;

			.wd-img {
				width: 100px;
				height: 100px;
				border: 2px solid $border-light;
				box-shadow: $shadow-sm;
				border-radius: 50%;
			}

			.avatar-placeholder {
				font-size: $font-lg;
				color: #fff;
			}
		}

		.user-details {
			flex: 1;
			margin: 0 $spacing-sm;

			.user-nickname {
				@include flex-between;
				color: $text-primary;
				margin-bottom: $spacing-sm;

				.user-nickname-title {
					font-size: $font-xl;
					font-weight: $font-bold;
					margin: 0;
				}

				.u-button {
					margin: 0;
					width: 80rpx;
				}
			}

			.user-id,
			.user-type {
				font-size: $font-sm;
				color: $text-secondary;
				line-height: $line-height-base;
			}
		}

		.arrow-icon {
			color: $text-secondary;
			font-size: $font-lg;
		}
	}

	// 用户标签
	.user-tags {
		background: $bg-card;
		display: flex;
		justify-content: flex-start;
		padding: $spacing-sm $spacing-lg;

		.wd-tag {
			padding: $spacing-sm $spacing-lg;

			.wd-tag__text {
				font-size: $font-sm;
			}
		}
	}

	// 分割线
	.u-divider {
		margin: 0;
	}

	// 表单信息
	.user-form-item {
		background: $bg-card;
		padding: $spacing-lg;

		/* #ifdef H5 */
		:deep(.u-form-item__body) {
			align-items: flex-start;
		}
		/* #endif */
		
		/* #ifndef H5 */
		// 小程序端使用全局样式覆盖
		.u-form-item__body {
			align-items: flex-start !important;
		}
		/* #endif */
	}

	// 帖子内容区域
	.post-content {
		background: $bg-card;
		padding: $spacing-lg;
		margin-top: $spacing-base;

		.posts-container {
			display: flex;
			flex-direction: column;
			gap: $spacing-base;

			.empty-posts {
				@include flex-center;
				flex-direction: column;
				padding: $spacing-xxl 0;
				gap: $spacing-base;

				.empty-text {
					font-size: $font-base;
					color: $text-tertiary;
				}
			}
		}
	}

	// 预约区域
	.appointment-section {
		background: $bg-card;
		border-radius: $radius-md;
		padding: $spacing-lg;
		margin: 0 $spacing-lg $spacing-lg;
		box-shadow: $shadow-sm;

		.section-header {
			@include flex-between;
			margin-bottom: $spacing-lg;

			.section-header-title {
				font-size: $font-lg;
				font-weight: $font-semibold;
				color: $text-primary;
			}

			.section-arrow {
				color: $text-tertiary;
				font-size: $font-lg;
			}
		}

		.appointment-tabs {
			display: flex;
			justify-content: space-around;

			.tab-item {
				@include flex-center;
				flex-direction: column;
				padding: $spacing-base 0;
				flex: 1;

				.tab-icon {
					font-size: $font-lg;
					color: #fff;
					background: $success-color;
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					@include flex-center;
					margin-bottom: $spacing-xs;
				}

				.tab-text {
					font-size: $font-sm;
					color: $text-secondary;
				}
			}
		}
	}

	// 更多服务区域
	.more-services {
		background: $bg-card;
		border-radius: $radius-md;
		margin: 0 $spacing-lg;
		overflow: hidden;
		box-shadow: $shadow-sm;

		.services-title {
			font-size: $font-lg;
			font-weight: $font-semibold;
			color: $text-primary;
			padding: $spacing-lg;
			border-bottom: 1px solid $border-light;
		}

		.wot-list {
			.wot-list-item {
				height: 56px;
				border-bottom: 1px solid $border-light;

				&:last-child {
					border-bottom: none;
				}

				.wot-icon {
					color: $success-color;
				}
			}
		}
	}

	// 底部导航
	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 56px;
		background: $bg-card;
		@include flex-center;
		justify-content: space-around;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		z-index: $z-index-fixed;

		.nav-item {
			@include flex-center;
			flex-direction: column;
			flex: 1;

			&.active {
				.nav-icon,
				.nav-text {
					color: $primary-color;
				}
			}

			.nav-icon {
				font-size: $font-lg;
				color: $text-tertiary;
				margin-bottom: $spacing-xs;
			}

			.nav-text {
				font-size: $font-xs;
				color: $text-tertiary;
			}
		}

		// 中间预约按钮
		.appointment-nav {
			flex: 1;
			@include flex-center;
			margin-top: -20px;

			.appointment-btn {
				width: 56px;
				height: 56px;
				background: $primary-color;
				border-radius: 50%;
				@include flex-center;
				flex-direction: column;
				box-shadow: 0 4px 10px rgba(91, 140, 255, 0.3);

				.appointment-icon {
					color: white;
					font-size: $font-lg;
					margin-bottom: 2px;
				}

				.appointment-text {
					font-size: $font-xs;
					color: white;
				}
			}
		}
	}
}
